<template>
  <div class="Details">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      right-text
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="Img">
      <img :src="list.coverImg" alt />
    </div>
    <div class="main">
      <div class="main_xq">
        <div class="icon">
          <van-icon @click="btnColor" class="iconn" :style="{color:color}" name="like" />
        </div>
        <van-card :price="list.price" :title="list.name" />
      </div>
    </div>
    <div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon @click="tzgwc" icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="length" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button @click="addtocart" type="warning" text="加入购物车" />
        <van-goods-action-button @click="showcart" type="danger" text="立即购买" v-model="show" />
      </van-goods-action>
    </div>
    <van-sku
      :show-add-cart-btn="false"
      v-model="show"
      :sku="sku"
      :goods="goods"
      :quota="0"
      :hide-stock="sku.hide_stock"
      :message-config="messageConfig"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import { postCart, getCart } from "../services/dress";
import { getCookie, setCookie, delCookie } from "../utils/request";
export default {
  data() {
    return {
      color: "#ccc",
      show: false,
      list: [],
      num: "1",
      switchs: false,
      sku: {
        // 数据结构见下方文档
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "2", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
              },
              {
                id: "2",
                name: "蓝色",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "", // 可选值，占位文本
          },
        ],
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        // 数据结构见下方文档
        picture: "https://img.yzcdn.cn/1.jpg",
      },
      messageConfig: {
        // 数据结构见下方文档
      },
      length: "",
    };
  },
  created() {
    this.list = this.$store.state.toDetails;
    // console.log(this.$store.state.toDetails);
    this.sku.price = this.list.price;
    this.goods.picture = this.list.coverImg;
    getCart().then((res) => {
      // console.log(res);
      this.length = res.length;
    });
    if (getCookie()) {
      // console.log(getCookie());
      getCookie().forEach((item) => {
        // var obj = this.list;
        if (
          this.list._id == item.id &&
          this.list.productCategory._id == item.fatherID
        ) {
          console.log("aaa");
          this.switchs = true;
          console.log(this.switchs);
          if (this.switchs) {
            this.color = "red";
          } else {
            this.color = "#ccc";
          }
        }
      });
    }
  },

  methods: {
    btnColor() {
      let obj = this.$store.state.toDetails;
      this.switchs = !this.switchs;
      if (this.switchs) {
        this.color = "red";
        setCookie(obj);
        console.log(obj);
      } else {
        this.color = "#ccc";
        delCookie(obj);
      }
    },
    onClickLeft() {
      history.go(-1);
    },
    onClickRight() {},
    reduceOne() {
      if (this.num > 1) {
        this.num = Number(this.num) - 1;
      }
    },
    plus() {
      this.num = Number(this.num) + 1;
    },
    addtocart() {
      postCart(this.list._id, this.num).then((res) => {
        // console.log(res);
      });
      getCart().then((res) => {
        console.log(res);
        this.length = res.length;
      });
      // this.$router.push({
      //   name: "Car",
      // });
    },

    showcart() {
      this.show = !this.show;
    },
    onBuyClicked() {},
    onAddCartClicked() {},
    tzgwc() {
      this.$router.push({
        name: "Car",
      });
    },
  },
};
</script>

<style scoped >
.Details {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  overflow: auto;
}
.Img {
  width: 100%;
  height: 375px;
  margin-top: 49px;
}
.Img img {
  display: block;
  height: 100%;
  width: 100%;
}
.main_xq {
  width: 90%;
  height: 50px;
  margin: 0 auto;
  background-color: pink;
  position: relative;
}
.back {
  font-size: 20px;
  height: 25px;
  width: 26px;
  margin: 0;
  margin-left: 20px;
  border-radius: 50%;
  margin-top: 10px;
  padding-left: 4px;
  padding-top: 6px;
}
.login_title {
  height: 70px;
  background: url(https://s1.ax1x.com/2020/08/27/dhu9yQ.png);
  background-size: 150% 70px;
  margin-bottom: 20px;
  position: relative;
}
.login_title p {
  position: absolute;
  left: 50%;
  bottom: 3px;
  font-size: 18px;
  line-height: 0;
}
.icon {
  width: 20px;
  height: 20px;
  position: relative;
  bottom: -100px;
  left: 300px;
  z-index: 999;
}
.iconn {
  font-size: 20px;
}
</style>